<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.f_effectdatename" placeholder="生效日期名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="searchEffectDate">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addEffectDate">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table   :data="effectdates" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="f_effectdatename"  label="生效日期名称" width="120" sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatecount" label="日期个数" width="120"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdateone" label="日期一"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatetwo" label="日期二"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatethree" label="日期三"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatefour" label="日期四"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatefive" label="日期五"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatesix" label="日期六"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdateseven" label="日期七"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdateeight" label="日期八"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatenine" label="日期九"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdateten" label="日期十"  width="100"  sortable>
			</el-table-column>
			<el-table-column prop="f_effectdateeleven" label="日期十一"  width="120" sortable>
			</el-table-column>
			<el-table-column prop="f_effectdatetwelve" label="日期十二"  width="120" sortable>
			</el-table-column>			
    	    <el-table-column prop="f_effectdatethirteen" label="日期十三"  width="120" sortable>
			</el-table-column>			
    	    <el-table-column prop="f_effectdatefourteen" label="日期十四"  width="120" sortable>
			</el-table-column>					
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm" >
				<el-form-item label="日期名称" prop="f_effectdatename">
					<el-input v-model="editForm.f_effectdatename" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="日期个数">
					<el-radio-group v-model="editForm.f_effectdatecount" @change="changeEditDateRow()">
						<el-radio class="radio" :label="1">1</el-radio>
						<el-radio class="radio" :label="2">2</el-radio>
						<el-radio class="radio" :label="3">3</el-radio>
						<el-radio class="radio" :label="4">4</el-radio>
           			    <el-radio class="radio" :label="5">5</el-radio>
						<el-radio class="radio" :label="6">6</el-radio>
						<el-radio class="radio" :label="7">7</el-radio>
						<el-radio class="radio" :label="8">8</el-radio>
						<el-radio class="radio" :label="9">9</el-radio>
						<el-radio class="radio" :label="10">10</el-radio>
						<el-radio class="radio" :label="11">11</el-radio>
						<el-radio class="radio" :label="12">12</el-radio>
         			    <el-radio class="radio" :label="13">13</el-radio>
						<el-radio class="radio" :label="14">14</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="建立人">
					<el-col :span="3">
						<el-input type="text" v-model="editForm.f_effectdatecreateoperator"></el-input>
					</el-col>
				</el-form-item>
				<el-col :span="4" v-show="effectdateone">
					<el-form-item label="日期一">
					<el-input v-model="editForm.f_effectdateone"  placeholder="010101"></el-input>
					</el-form-item>
       			 </el-col>
			  	 <el-col :span="4" v-show="effectdatetwo">
					<el-form-item label="日期二">
					<el-input v-model="editForm.f_effectdatetwo" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatethree">
					<el-form-item label="日期三">
					<el-input v-model="editForm.f_effectdatethree" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefour">
					<el-form-item label="日期四">
					<el-input v-model="editForm.f_effectdatefour" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefive">
					<el-form-item label="日期五">
					<el-input v-model="editForm.f_effectdatefive" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatesix">
					<el-form-item label="日期六">
					<el-input v-model="editForm.f_effectdatesix" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateseven">
					<el-form-item label="日期七">
					<el-input v-model="editForm.f_effectdateseven" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateeight">
					<el-form-item label="日期八">
					<el-input v-model="editForm.f_effectdateeight" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatenine">
					<el-form-item label="日期九">
					<el-input v-model="editForm.f_effectdatenine" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateten">
					<el-form-item label="日期十">
					<el-input v-model="editForm.f_effectdateten" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateeleven">
					<el-form-item label="日期十一">
					<el-input v-model="editForm.f_effectdateeleven" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatetwelve">
					<el-form-item label="日期十二">
					<el-input v-model="editForm.f_effectdatetwelve" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatethirteen">
					<el-form-item label="日期十三">
					<el-input v-model="editForm.f_effectdatethirteen" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefourteen">
					<el-form-item label="日期十四">
					<el-input v-model="editForm.f_effectdatefourteen" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--增加界面-->
		<el-dialog title="增加" v-model="addFormVisible" :close-on-click-modal="false" >
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="日期名称" prop="f_effectdatename">
					<el-input v-model="addForm.f_effectdatename" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="日期个数">
					<el-radio-group v-model="addForm.f_effectdatecount"  @change="changeAddDateRow()">
						<el-radio class="radio" :label="1">1</el-radio>
						<el-radio class="radio" :label="2">2</el-radio>
						<el-radio class="radio" :label="3">3</el-radio>
						<el-radio class="radio" :label="4">4</el-radio>
            		    <el-radio class="radio" :label="5">5</el-radio>
						<el-radio class="radio" :label="6">6</el-radio>
						<el-radio class="radio" :label="7">7</el-radio>
						<el-radio class="radio" :label="8">8</el-radio>
            			<el-radio class="radio" :label="9">9</el-radio>
						<el-radio class="radio" :label="10">10</el-radio>
						<el-radio class="radio" :label="11">11</el-radio>
						<el-radio class="radio" :label="12">12</el-radio>
            			<el-radio class="radio" :label="13">13</el-radio>
						<el-radio class="radio" :label="14">14</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="建立人">
					<el-col :span="3">
						<el-input type="text" v-model="addForm.f_effectdatecreateoperator"></el-input>
					</el-col>
				</el-form-item>
				<el-col :span="4" v-show="effectdateone">
					<el-form-item label="日期一">
					<el-input v-model="addForm.f_effectdateone"  placeholder="010101"></el-input>
					</el-form-item>
       			 </el-col>
			  	 <el-col :span="4" v-show="effectdatetwo">
					<el-form-item label="日期二">
					<el-input v-model="addForm.f_effectdatetwo" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatethree">
					<el-form-item label="日期三">
					<el-input v-model="addForm.f_effectdatethree" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefour">
					<el-form-item label="日期四">
					<el-input v-model="addForm.f_effectdatefour" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefive">
					<el-form-item label="日期五">
					<el-input v-model="addForm.f_effectdatefive" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatesix">
					<el-form-item label="日期六">
					<el-input v-model="addForm.f_effectdatesix" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateseven">
					<el-form-item label="日期七">
					<el-input v-model="addForm.f_effectdateseven" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateeight">
					<el-form-item label="日期八">
					<el-input v-model="addForm.f_effectdateeight" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatenine">
					<el-form-item label="日期九">
					<el-input v-model="addForm.f_effectdatenine" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateten">
					<el-form-item label="日期十">
					<el-input v-model="addForm.f_effectdateten" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdateeleven">
					<el-form-item label="日期十一">
					<el-input v-model="addForm.f_effectdateeleven" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatetwelve">
					<el-form-item label="日期十二">
					<el-input v-model="addForm.f_effectdatetwelve" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatethirteen">
					<el-form-item label="日期十三">
					<el-input v-model="addForm.f_effectdatethirteen" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
				 <el-col :span="4" v-show="effectdatefourteen">
					<el-form-item label="日期十四">
					<el-input v-model="addForm.f_effectdatefourteen" placeholder="010101"></el-input>
					</el-form-item>
				 </el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { setEffectDate, getAllEffectDate, updateEffectDate, removeEffectDate,searchEffectdateName } from '../../api/api';

	export default {
		data() {
			return {
				loginuser: '',
				filters: {
					name: ''
       			 },
				effectdateone:false,
				effectdatetwo:false,
				effectdatethree:false,
				effectdatefour:false,
				effectdatefive:false,
				effectdatesix:false,
				effectdateseven:false,
				effectdateeight:false,
				effectdatenine:false,
				effectdateten:false,
				effectdateeleven:false,
				effectdatetwelve:false,
				effectdatethirteen:false,
				effectdatefourteen:false,
				effectdates:[],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					f_stairpricename: [
						{ required: true, message: '请输入阶梯名称', trigger: 'blur' }
					],
					f_staironepriceone:[
						{ required: true, message: '请输入阶梯名称', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					f_stairpricename: '',
					f_stairpricecount: 1,
					f_staironeflag: 1,
					f_stairtwoflag: 2,
					f_stairthreeflag: 3,
					f_stairfourflag: 4,
				
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					f_effectdatecount:1 ,
				}

			}
		},
		methods: {
			changeEditDateRow: function(){
				this.effectdatefourteen = true;
				this.effectdatethirteen = true;
				this.effectdatetwelve = true;
				this.effectdateeleven = true;
				this.effectdateten = true;
				this.effectdatenine = true;
				this.effectdateeight = true;
				this.effectdateseven = true;
				this.effectdatesix = true;
				this.effectdatefive = true;
				this.effectdatefour = true;
				this.effectdatethree = true;
				this.effectdatetwo = true;
				this.effectdateone = true;
				//		console.log("1");
				var selectedRadio = this.editForm.f_effectdatecount;
				console.log(selectedRadio);
				if(selectedRadio <14)
					this.effectdatefourteen=false;
				if(selectedRadio <13)
					this.effectdatethirteen=false; 
				if(selectedRadio <12)
					this.effectdatetwelve=false;  
				if(selectedRadio <11)
					this.effectdateeleven=false;  
				if(selectedRadio <10)
					this.effectdateten=false;  
				if(selectedRadio <9)
					this.effectdatenine=false;  
				if(selectedRadio <8)
					this.effectdateeight=false;  
				if(selectedRadio <7)
					this.effectdateseven=false;  
				if(selectedRadio <6)
					this.effectdatesix=false;  
				if(selectedRadio <5)
					this.effectdatefive=false;  
				if(selectedRadio <4)
					this.effectdatefour=false;  
				if(selectedRadio <3)
					this.effectdatethree=false;  
				if(selectedRadio <2)
					this.effectdatetwo=false;              
				},
			changeAddDateRow: function(){

				this.effectdatefourteen = true;
				this.effectdatethirteen = true;
				this.effectdatetwelve = true;
				this.effectdateeleven = true;
				this.effectdateten = true;
				this.effectdatenine = true;
				this.effectdateeight = true;
				this.effectdateseven = true;
				this.effectdatesix = true;
				this.effectdatefive = true;
				this.effectdatefour = true;
				this.effectdatethree = true;
				this.effectdatetwo = true;
				this.effectdateone = true;
				//		console.log("1");
				var selectedRadio = this.addForm.f_effectdatecount;
				//console.log(selectedRadio);
				if(selectedRadio <14)
					this.effectdatefourteen=false;
				if(selectedRadio <13)
					this.effectdatethirteen=false; 
				if(selectedRadio <12)
					this.effectdatetwelve=false;  
				if(selectedRadio <11)
					this.effectdateeleven=false;  
				if(selectedRadio <10)
					this.effectdateten=false;  
				if(selectedRadio <9)
					this.effectdatenine=false;  
				if(selectedRadio <8)
					this.effectdateeight=false;  
				if(selectedRadio <7)
					this.effectdateseven=false;  
				if(selectedRadio <6)
					this.effectdatesix=false;  
				if(selectedRadio <5)
					this.effectdatefive=false;  
				if(selectedRadio <4)
					this.effectdatefour=false;  
				if(selectedRadio <3)
					this.effectdatethree=false;  
				if(selectedRadio <2)
					this.effectdatetwo=false;              
					},
			//获取全部日期列表
			searchEffectDate: function(){
				
			},
			formatIsNull: function (row, column) {
				
				
			},
			getEffectDates: function(){
				let para= {};
				this.loading = true;
				getAllEffectDate(para).then((res)=>{
					this.effectdates = res.data;
					this.loading = false;
				});
			},
			//查询单个日期
			searchOneStairPrices:function(){

			},
			//显示新增界面
			addEffectDate: function(index , row ){
				this.addFormVisible = true;
			//	this.addForm.f_effectdatecount = 1;
				this.changeAddDateRow();
			},
				//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
			//	console.log(Object.assign({}, row));
				this.editForm = Object.assign({}, row);	
				console.log(this.editForm);
				this.changeEditDateRow();
			
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					removeStairPrice(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getEffectDates();
					});
				}).catch(() => {

				});
			},
		
			//修改生效日期气价
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							console.log(para);
							updateEffectDate(para).then((res) => {
								this.editLoading = false;
								if(res.data=='updateeffectdatesuccess'){
								this.$message({
									message: '更新生效日期成功',
									type: 'success'
								});
								this.editFormVisible = false;
								this.getStairPrices();
								}else{
									this.$message({
									message: '更新生效日期失败',
									type: 'error'
								});
								}
								this.$refs['editForm'].resetFields();
								this.getEffectDates();
							});
						});
					}
				});
			},
			//新增生效日期
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							setEffectDate(para).then((res) => {
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getEffectDates();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveStairPirce(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getStairPrices();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.addForm.f_effectdatecount = 1;
		//	this.getStairPrices();
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.addForm.f_effectdatecreateoperator  = user.name || '';			
			  };
			this.getEffectDates();
		}
	}

</script>

<style slot-scope>
	.editrowone>.el-col,.editrowtwo>.el-col,.editrowthree>.el-col,.editrowfour>.el-col{
		margin:1px ;
		width: 78px;
		font-size:small;
	}
	.editrowtitle>.el-col{
		margin:1px;
		width: 78px;
		font-size:small;
		border-color: black;	
	}
	.editrowtitle>.el-col>.el-input{
		font-size: 13px;
		font-weight:300;
		border-color: white;
	}
	.el-input{
		text-align: center;
		
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; opacity:1; 
	}
</style>